<template>
  <div>
		<div id="payContent" v-html="payContent"></div>
		<el-form ref="formObj" :model="wyform" :rules="rules">
			<el-descriptions title="挂号" border :column="2">
				<el-descriptions-item label="姓名">
					<el-form-item prop="name">
						<el-input v-model="wyform.name" />
					</el-form-item>
				</el-descriptions-item>
				<el-descriptions-item label="手机号">
					<el-form-item prop="phone">
						<el-input v-model="wyform.phone"/>
					</el-form-item>
				</el-descriptions-item>
				<el-descriptions-item label="身份证">
					<el-form-item prop="idCard">
						<el-input v-model="wyform.idCard" @blur="idCardBlur" />
					</el-form-item>
				</el-descriptions-item>
				<el-descriptions-item label="性别">
					<el-form-item>
						<el-input readonly v-model="wyform.gender" />
					</el-form-item>
				</el-descriptions-item>
				<el-descriptions-item label="生日">
					<el-form-item>
						<el-input readonly v-model="wyform.birthday"></el-input>
					</el-form-item>
				</el-descriptions-item>
				<el-descriptions-item label="年龄">
					<el-form-item>
						<el-input readonly v-model="wyform.age"></el-input>
					</el-form-item>
				</el-descriptions-item>
				<el-descriptions-item label="科室">
					<el-form-item prop="deptId">
						<el-select
							v-model="deptItem"
							filterable
							@change="changeDept">
							<el-option
								v-for="item in deptList"
								:key="item.id"
								:label="item.name"
								:value="JSON.stringify(item)"></el-option>
						</el-select>
					</el-form-item>
				</el-descriptions-item>
				<el-descriptions-item label="医生">
					<el-form-item prop="doctorId">
						<el-select
							v-model="doctorItem"
							filterable
							@change="changeDoctor"
							>
							<el-option
								v-for="item in doctorList"
								:key="item.id"
								:label="item.name"
								:value="JSON.stringify(item)"
								></el-option>
						</el-select>
					</el-form-item>
				</el-descriptions-item>
				<el-descriptions-item label="挂号日期">
					<el-form-item prop="registDate">
						<el-date-picker
							v-model="wyform.registDate"
							value-format="YYYY-MM-DD"></el-date-picker>
					</el-form-item>
				</el-descriptions-item>
				<el-descriptions-item label="挂号时间">
					<el-form-item prop="registTime">
						<el-radio-group v-model="wyform.registTime">
							<el-radio :value="0">上午</el-radio>
							<el-radio :value="1">下午</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-descriptions-item>
				<el-descriptions-item  label="挂号金额">
					<el-form-item>
						<el-input readonly v-model="wyform.price" />
					</el-form-item>
				</el-descriptions-item>
			</el-descriptions>
			<el-button style="margin-top: 20px" type="primary" @click="save">确定</el-button>
		</el-form>
  </div>
</template>

<script setup>
import { copy } from 'copy-anything'
import { ref, reactive, nextTick } from 'vue'
import { get, post } from '@/axios'
import DateDiff from 'date-diff'
const payContent = ref('')
const deptItem = ref(null)
const doctorItem = ref(null)
const formObj = ref()
const deptList = ref([])
const doctorList = ref([])
const registerLevelList = ref({})
const wyform = reactive({
	name: '',
	phone: '',
	idCard: '',
	gender: '',
	birthday: '',
	age: null,
	deptId: null,
	doctorId: null,
	registDate: '',
	registTime: null,
	price: null,
	deptName: '',
	doctorName: ''
})
const rules = {
	name: [
		{ required: true, message: '请输入姓名', trigger: 'blur' }
	],
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3-9][0-9]{9}$/, message: '手机号格式不正确', trigger: 'blur' }
	],
	idCard: [
		{ required: true, message: '请输入身份证', trigger: 'blur' }
	],
	deptId: [
		{ required: true, message: '请选择科室', trigger: 'blur' }
	],
	doctorId: [
		{ required: true, message: '请选择医生', trigger: 'blur' }
	],
	registDate: [
		{ required: true, message: '请选择挂号日期', trigger: 'blur' }
	],
	registTime: [
		{ required: true, message: '请选择挂号时间', trigger: 'blur' }
	]
}
getDept()
getRegisterLevel()
function getRegisterLevel () {
	get('/pmsRegist/getRegisterLevel', {}, content => {
		const json = {}
		for (const i in content) {
			json[content[i].id] = content[i]
		}
		registerLevelList.value = json
	})
}
function getDept () {
	get('/pmsRegist/getDept', {}, content => {
		deptList.value = content
	})
}
function changeDept (item) {
	const json = JSON.parse(item)
	get('/pmsRegist/getDoctor', { deptId: json.id }, content => {
		doctorList.value = content
		wyform.doctorId = null
	})
	wyform.deptId = json.id
	wyform.deptName = json.name
}
function changeDoctor (item) {
	const json = JSON.parse(item)
	wyform.doctorId = json.id
	wyform.doctorName = json.name
	wyform.price = registerLevelList.value[json.registerLevelId].price / 100
}
function idCardBlur (event) {
	const n = parseInt(wyform.idCard.substring(16, 17)) 
	wyform.gender = n % 2 === 0 ? '女' : '男'
	const m = wyform.idCard.substring(6, 14)
	wyform.birthday = m.substring(0, 4) + '-' + m.substring(4, 6) + '-' + m.substring(6, 8)
	const now = new Date()
	const birthday = new Date(wyform.birthday)
	const diff = new DateDiff(now, birthday)
	wyform.age = parseInt(diff.years())
}
function save () {
	const submitForm = copy(wyform)
	submitForm.price = wyform.price * 100
	post('/pmsRegist/add', submitForm, content => {
		payContent.value = content
		nextTick(() => {
			document.querySelector('#payContent').firstChild.submit()
		})
	}, formObj)
}
</script>

<style scoped lang="scss">
.el-descriptions {
	width: 700px;
	.el-select {
		width: 100%;
	}
	::v-deep .el-date-editor {
		width: 100%;
	}
}
</style>